<template>
<!--结算中心-->
  <div>
    <headers></headers>
    <div class="divider">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>VIP会员<span>></span>企业VIP<span>></span>  结算中心
      </div>
    </div>
    <div class="auto header">结算中心</div>
    <div class="shangpin auto padding250">
      <p>购买商品</p>
      <div class="clearfix">
        <div class="left pull-left">
          <img :src="order.orderImage" alt="" width="224">
          <!--<p  class="money">尊享价 <span >￥{{detail.price}}</span></p>-->
        </div>
        <ul class="pull-left">
          <li class="title">{{order.orderBody}}</li>
          <li ><img src="../../assets/pdf.png" alt="">《勤博教育企业钻石VIP购买合同》<a href="javascript;:" @click.prevent="paper" target="_blank">下载附件</a></li>
        </ul>
        <ul class="pull-right">
          <li>需支付金额 <span>￥{{order.orderAmount}}</span></li>
          <li><img src="../../assets/clock.png" alt="">{{content}}</li>
        </ul>
      </div>
      <Tabs :animated="false" type="card" class="bankPane">
        <TabPane  label="企业网银" >
          <div class="bank">
            <a href="javascript;:" @click.prevent="unionPay('ICBC')"><img src="../../assets/gognshang.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('ABC')"><img src="../../assets/nongye.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BOC')"><img src="../../assets/chain.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('CCB')"><img src="../../assets/jianshe.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('CMB')"><img src="../../assets/zhaoshang.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BOCOM')"><img src="../../assets/jiaotong.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('PSBC')"><img src="../../assets/youzhneg.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('CNCB')"><img src="../../assets/zhongxin.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('CMBC')"><img src="../../assets/minshneg.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('HXB')"><img src="../../assets/huaxia.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('CEB')"><img src="../../assets/guangda.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('CIB')"><img src="../../assets/xingye.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('SPDB')"><img src="../../assets/pufa.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('PAB')"><img src="../../assets/pingan.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('GDB')"><img src="../../assets/guangfa.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BCCB')"><img src="../../assets/beijing.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BEA')"><img src="../../assets/dongya.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BDQ')"><img src="../../assets/qingdao.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BHB')"><img src="../../assets/hebei.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('HSB')"><img src="../../assets/weishang.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BOT')"><img src="../../assets/tianjin.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BON')"><img src="../../assets/ningbo.jpg" alt=""></a>
            <a href="javascript;:" @click.prevent="unionPay('BOH')"><img src="../../assets/hangzhou.jpg" alt=""></a>
          </div>
        </TabPane>
      </Tabs>
    </div>
    <footers></footers>
    <loginmodal  ref="loginA"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .divider {
    height: 60px;
    background-color: #f5f5f5;
    font-size: 16px;
    line-height: 60px;
    text-align: left;

    span {
      margin: 0 10px;
    }

    a {
      color: #333;

      &:hover {
        color: #073c68;
        font-weight: 700;
      }
    }
  }
  .header{
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    font-size: 18px;
    color: #000;
    padding-left: 20px;
    margin: 30px auto 20px;
    text-align: left;
  }
  .shangpin{
    text-align: left;
    >p,ul.pull-left .title,ul.pull-right li:first-child{
      font-size: 18px;
      color: #333;
    }
    >p{
      margin-bottom: 15px;
    }
    .left{
      position: relative;
      .money{
        position: absolute;
        color: #f2b05a;
        right: 10px;
        bottom: 15px;
        font-size: 12px;
        span{
          font-size: 20px;
          margin-left: 5px;
        }
      }
    }
    ul.pull-left{
      margin-left: 25px;
      li:last-child{
        font-size: 14px;
        margin-top: 10px;
        img{
          vertical-align: sub;
        }
        a{
          color: #0089c4;
          margin-left: 5px;
        }
      }
    }
    ul.pull-right{
      text-align: right;
      li:first-child{
        span{
          color: #ff0000;
          margin-left: 5px;
        }
      }
      li:last-child{
        color: #999;
        font-size: 12px;
        margin-top: 5px;
        img{
          vertical-align: sub;
          margin-right: 5px;
        }
      }
    }
    .bankPane{
      margin-top: 20px;

    }
    .bank{
      padding-top: 15px;
      a{
        display: inline-block;
        width: 190px;
        height: 40px;
        text-align: center;
        margin:0 15px 15px 0;
        border:1px solid #ccc;
      }
      a:hover{
        border-color: #348EED;
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import loginmodal from '../template/loginmodal'
  import {centreInfoWeb,orderbuyPageWeb,getHtml,unionPay} from '../../http'
  import {getStore} from '../../storage'
    export default {
        name: '',
        props: {},
        data() {
            return {
              orderId :'',        //订单Id
              content:'',         //提示信息
              order:''            //订单
            };
        },
        methods: {
          //银联支付
          unionPay(bank){
            //判断用户登录
            centreInfoWeb().then(res => {
              if(res.code === 200){
                //银联支付请求
                unionPay({orderId:this.orderId,dbtbnk:bank}).then(res => {
                  if(res.code === 200){
                    //跳转银联支付页面
                    window.location.href = res.data;
                  }else{
                    this.$Notice.warning({
                      title: '企业对公支付使用失败！',
                      duration: 3,
                    });
                  }
                }).catch()
              }else {
                //未登录，登录框提示
                this.$refs.loginA.showModal();
              }
            }).catch()
          },
          //获取购买协议
          paper(){
            this.$router.push({
              name:'html',
              query:{
                type:'companyVIP',
              }
            })
          }
        },
        created() {
          //接收订单号
          this.orderId = this.$route.query.orderId;
          //判定登录
          centreInfoWeb().then(res => {
            if(res.code === 200){
              //获取订单页面信息
              orderbuyPageWeb({orderId:this.orderId}).then(res => {
                this.content = res.data.content;
                this.order = res.data.order;
              }).catch()
            }else{
              this.$Notice.warning({
                title: "请先登录",
                duration: 3,
              });
            }
          }).catch()
        },
        components: {
          headers,
          footers,
          loginmodal
        }
    }
</script>
